<template>
    <div class="view-wrapper">
      <!-- <div class="tabs-body"> -->
      <div class="main_top">
        <div class="lef">
          <div
            class="nav_list"
            v-for="item in typeList"
            :class="['list', currentNavtab == item.id ? 'active' : '']"
            :key="item.id"
            :value="item.id"
            @click="handleTab(item.id)"
          >
            {{ item.value }}
          </div>
        </div>
      </div>
      <div class="table">
        <orderList v-if="currentNavtab == 1" :phone="phone"></orderList>
        <interestsList v-if="currentNavtab == 2" :settleNo="settleNo"></interestsList>
        <awardList v-if="currentNavtab == 3"></awardList>
      </div>
      <!-- </div> -->
    </div>
  </template>
    
  <script>
  import orderList from "./tabBox/orderList";
  import interestsList from "./tabBox/interestsList";
  import awardList from "./tabBox/awardList";
  
  export default {
    // dicts: ['equity_card_issue_type', 'equity_card_sell_status'], 
    name: "",
    components: {
      orderList,
      interestsList,
      awardList,
    },
    data() {
      return {
        currentNavtab: 1,
        typeList: [
          { id: 1, value: "活动订单" },
          { id: 2, value: "权益明细" },
          { id: 3, value: "奖励明细" },
        ],
        settleNo: '',
        phone: '',
      };
    },
    created() {
      if (this.$route.query.settleNo) {
        this.settleNo = this.$route.query.settleNo;
      }
      if(this.$route.query.type){
        this.currentNavtab = this.$route.query.type;
      }
      if(this.$route.query.phone){
        this.phone = this.$route.query.phone;
      }
    },
    methods: {
      //切换选项
      handleTab(id) {
        this.currentNavtab = id;
        // this.getList();
      },
    },
  };
  </script>
    <style lang="scss" scoped>
  .tabs-body {
    background-color: #fff;
    // padding: 20px;
  }
  .nav_list {
    cursor: pointer;
  }
  .main_top {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    font-size: 14px;
    color: #333;
    background: #fff;
    border-radius: 6px;
    margin-bottom: 10px;
    padding: 20px 10px;
    .lef {
      display: flex;
      justify-content: flex-start;
      border: 1px solid #dfe6ec;
      .list {
        height: 40px;
        text-align: center;
        line-height: 40px;
        width: 140px;
        text-align: center;
        border-right: 1px solid #dfe6ec;
        background: #fff;
      }
      .list:nth-last-child(1) {
        border: none;
      }
      .active {
        background: #1890ff;
        color: #fff;
      }
    }
  }
  </style>
    